import { computed, defineComponent, onMounted, PropType, reactive, ref, toRaw, watch } from 'vue';
import { PageItemSearch, ResSearch, selectParam } from '@/domain/common/types/page';
import { Form, FormItem, Input, SelectOptGroup, Select, SelectOption, Button } from 'ant-design-vue';
import { ConsoleLogger } from '@/utils/debug-log';
import { emit } from 'process';
import { assign } from 'lodash';
const Option = Select.Option;
export default defineComponent({
  name: 'searchList',
  props: {
    searchList: {
      type: Array as PropType<ResSearch>,
      default: () => []
    },
    search: {
      type: Boolean,
      default: true
    },
    reset: {
      type: Boolean,
      default: true
    },
    resetLabel: {
      type: String,
      default: '重置',
      required: false
    },
    searchParam: {
      type: Object,
      default: () => {
        return {};
      }
    },
    searchLabel: {
      type: String,
      default: '查询'
    }
  },
  emits: ['resetEvent', 'searchEvent', 'reloadList'],
  setup(props, ctx) {
    const emit = ctx.emit;
    let params: selectParam = reactive({});
    let initParams: selectParam = {}; // 初始化查询默认值
    const formRef = ref<HTMLElement | null>(null);
    // 监听数据变化，初始化筛选项
    watch(
      () => props.searchList,
      (newVal) => {
        newVal?.forEach((val: PageItemSearch) => {
          if (val.column && val.value) {
            switch (val?.type) {
              case 'select':
                // } else {
                //   params[val.column] = val.value;
                // }
                params[val.column] = val.value;
                break;
              case 'input':
                params[val.column] = val.value;
                break;
              case 'selectMulti':
                const multi: Array<string | number> = val.value.split(',');
                params[val.column] = [] as number[];
                multi.forEach((v) => {
                  // if (!isNaN(Number(v))) {
                  //   (params[val.column] as number[]).push(Number(v));
                  // } else {
                  //   (params[val.column] as Array<string | number>).push(v);
                  // }
                  (params[val.column] as Array<string | number>).push(v);
                });
                break;
              default:
                params[val.column] = val.value;
                break;
            }
          }
        });
        console.log('searchParam', params);
        emit('reloadList', toRaw(params));
        initParams = { ...toRaw(params) };
      }
    );
    // 重置表单
    const resetForm = () => {
      for (let key in params) {
        delete params[key];
      }
      Object.assign(params, initParams);
    };
    return () => (
      <div class=" bg-white">
        <Form model={params} ref={formRef} layout="inline" style={{ display: 'flex' }}>
          {props.searchList?.map((node) => {
            if (!node.column) {
              return;
            }
            switch (node?.type) {
              case 'input':
                return (
                  <FormItem label={node.label} name={node.column} style={{ marginTop: '16px' }}>
                    <Input
                      disabled={node.disable}
                      style={{ width: '8rem' }}
                      value={(params[node?.column] as string) || ''}
                      onChange={(e) => {
                        params[node.column!] = e.target.value;
                      }}
                      placeholder={node.placeholder}
                    ></Input>
                  </FormItem>
                );
              case 'select':
                return (
                  <FormItem label={node.label} name={node.column} style={{ marginTop: '16px' }}>
                    <Select
                      disabled={node.disable}
                      style={{ minWidth: '8rem' }}
                      value={params[node?.column]}
                      onChange={(value) => {
                        params[node.column!] = value;
                      }}
                      placeholder={node.placeholder}
                    >
                      {node.options &&
                        node.options.map((val) => {
                          return <Option value={val.value}>{val.label}</Option>;
                        })}
                    </Select>
                  </FormItem>
                );
              case 'selectMulti':
                return (
                  <FormItem label={node.label} name={node.column} style={{ marginTop: '16px' }}>
                    <Select
                      disabled={node.disable}
                      style={{ minWidth: '8rem' }}
                      value={params[node?.column] || []}
                      onChange={(value) => {
                        params[node.column!] = value;
                      }}
                      mode={'multiple'}
                      maxTagCount={1}
                      placeholder={node.placeholder}
                    >
                      {node.options &&
                        node.options.map((val) => {
                          return <Option value={val.value}>{val.label}</Option>;
                        })}
                    </Select>
                  </FormItem>
                );
              default:
                break;
            }
          })}
          <FormItem style={{ marginTop: '16px' }}>
            {props.search && (
              <Button
                class={'inline-block ml-4 float-right '}
                type="primary"
                style={{ borderRadius: '4px' }}
                onClick={() => {
                  emit('resetEvent', params, resetForm);
                }}
              >
                {props.resetLabel}
              </Button>
            )}
            {props.search && (
              <Button
                class={'inline-block ml-4 float-right '}
                type="primary"
                style={{ borderRadius: '4px' }}
                onClick={async () => {
                  emit('searchEvent', toRaw(params));
                }}
              >
                查询
              </Button>
            )}
          </FormItem>
        </Form>
      </div>
    );
  }
});
